<template class="c">
  <swiper :options="swiperOption" ref="mySwiper" class="swi">
    <!-- slides -->
    <swiper-slide class="a"><img src="../assets/index/tu1.jpg" alt=""></swiper-slide>
    <swiper-slide class="a"><img src="../assets/index/tu2.jpg" alt=""></swiper-slide>
    <swiper-slide class="a"><img src="../assets/index/tu3.jpg" alt=""></swiper-slide>
    <swiper-slide class="a"><img src="../assets/index/tu4.jpg" alt=""></swiper-slide>
    <!-- Optional controls --> 
    <div class="swiper-pagination"  slot="pagination"></div>
<!--     <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>
</template>
  
<script>
import '../../static/css/swiper.min.css'
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          autoplay: 3000,
          loop:true,
          pagination : '.swiper-pagination',
        }
      }
    },
 
  }
</script>

<style type="text/css">
.c{
  overflow: hidden;
}
.a{
  float: left;
}
.a img{
width: 375px;
height: 150px; 
}
</style>